<template>
  <div class="gather_duty">
    <div class="gather_duty_title">
      <div class="duty_title_left">
        <van-dropdown-menu>
          <van-dropdown-item v-model="yearData" :options="yearOptions" @change="yearChange" />
          <van-dropdown-item v-model="monthData" :options="monthOptions" @change="monthChange" />
        </van-dropdown-menu>
      </div>
      <div class="duty_title_center">
        <!-- <div>销假：</div> -->
        <van-dropdown-menu>
          <van-dropdown-item v-model="backType" :options="backTypeOptions" @change="backChange" />
        </van-dropdown-menu>
      </div>
      <div class="duty_title_right" @click="chooseOP">
        <span>{{ orgPerson || '部门/人员' }}</span>
        <van-icon name="arrow-down" />
      </div>
    </div>
    <div class="gather_main">
      <div class="gather_statics">
        <div class="head">
          <span class="gather_main_title">
            <van-dropdown-menu>
              <van-dropdown-item v-model="holidayData" :options="holidayOptions" @change="holidayChange" />
            </van-dropdown-menu>
          </span>
          <span class="one_count">{{ dutyStaticsOne.leaveCount }}人</span>
          <div class="icon">
            <span class="refresh" @click="refreshFilter">重置</span>
            <i class="iconfont iconshaixuanguolv" :class="{ choose_i: filterStr }" @click="showFilter = true"></i>
          </div>
        </div>
        <div class="statics_box" v-if="listDate.length > 0">
          <div class="statics_info_one" v-for="(oneInfo, index) in listDate" :key="index">
            <div class="one_indo_title">
              <span class="boder_circle"></span>
              {{ oneInfo.orgName }}-{{ oneInfo.userName }}
            </div>
            <div class="ones_duty">
              <div v-for="twoInfo in oneInfo.statusDetailList" :key="twoInfo.dailyId">
                <div class="infos_one_gather" @click="goDetail(twoInfo)">
                  <p>{{ twoInfo.startTime }}-{{ twoInfo.endTime }}</p>
                  <p class="gather_status extra">
                    <span class="detail">{{ twoInfo.leaveTypeName }} {{ twoInfo.days }}天/{{ twoInfo.hours }}小时</span>
                    <span class="desc">{{ twoInfo.isCanceled === '1' ? '已销假' : '未销假' }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <van-empty v-else description="暂无数据" />
      </div>
    </div>

    <van-popup v-model="showFilter" round position="bottom" class="filter_pop">
      <div class="head">
        <div class="cancle" @click="showFilter = false">取消</div>
        <div class="title">选择{{ activeStatusInfo.text }}类型</div>
        <div class="sure" @click="onConfirmFil">确定</div>
      </div>
      <div class="filter_list" v-if="filterList.length > 0">
        <van-radio-group v-model="filterStr">
          <van-radio
            :name="items.leaveId"
            v-for="items in filterList"
            :key="items.leaveId"
            ref="checkboxes"
            @click="filterClick(items)">
            <template #icon="props">
              <div :class="['li', { li_choose: props.checked }]">{{ items.leaveName }}</div>
            </template>
          </van-radio>
        </van-radio-group>
      </div>
      <van-empty v-else description="暂无数据" />
    </van-popup>

    <van-popup v-model="cascaderShow" round position="bottom" class="cascader_pop">
      <filter-person
        v-if="cascaderShow"
        :cascaderOneList="cascaderOneList"
        :confirmInfo="confirmInfo"
        @cancle="cascaderShow = false"
        @confirm="peopleChooseConfirm"></filter-person>
    </van-popup>
  </div>
</template>

<script>
import {
  getDataPermissions,
  getSearchTimeList,
  getTypeList,
  getOrgStatisticsDetailApp,
  getOrgStatisticsSum,
} from '@api/api-attendance.js'
import FilterPerson from '@com/FilterPerson'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'StaticsGatherOrg',
  components: {
    FilterPerson,
  },
  data() {
    return {
      moment: moment,
      active: '0',

      showFilter: false, //是否展示时间弹出层
      listDate: [],
      activeStatusInfo: {},
      orgOptions: [],
      orgPerson: '',
      cascaderShow: false,
      cascaderOneList: [],
      confirmInfo: {
        oneInfo: {},
        secInfo: {},
        secList: [],
      },
      filterList: [],
      orgId: '',
      filterStr: '',
      yearData: '',
      monthData: '',
      yearOptions: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      monthOptions: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      backTypeOptions: [
        { text: '全部', value: '' },
        { text: '已销假', value: '1' },
        { text: '未销假', value: '0' },
      ],
      backType: '',
      holidayOptions: [],
      holidayData: '',
      dutyStaticsOne: {},
    }
  },
  created() {
    this.getSearchTimeList()
    this.getTypeList()
    if (sessionStorage.getItem('staticsInfo')) {
      Object.assign(this.$data, JSON.parse(sessionStorage.getItem('staticsInfo')))
    } else {
      this.orgId = this.$route.query.orgId || ''
      this.getDataPermissions()
    }
  },
  mounted() {},
  methods: {
    //获取部门列表
    getOrgTable() {
      if (!this.yearData || !this.holidayData) return
      const month1 = this.monthData ? this.monthData : '01'
      const timeS = this.yearData + '-' + month1
      const month2 = this.monthData ? this.monthData : '12'
      const timeE = this.yearData + '-' + month2
      const startTime = moment(timeS).startOf('month').format('YYYY-MM-DD')
      const endTime = moment(timeE).endOf('month').format('YYYY-MM-DD')
      const param = {
        startTime: startTime,
        endTime: endTime,
        type: this.holidayData || '0',
        orgId: this.orgId,
        userId: this.confirmInfo.secInfo.userId || '',
        leaveId: this.filterStr || '',
        isLeaveCancel: this.backType,
      }
      getOrgStatisticsSum({
        startTime: startTime,
        endTime: endTime,
        orgId: this.orgId,
        userId: this.confirmInfo.secInfo.userId || '',
      }).then(res => {
        if (res.status === 200) {
          this.dutyStaticsOne = res.data
        }
      })
      getOrgStatisticsDetailApp(param).then(res => {
        if (res.status === 200) {
          this.listDate = res.data
        }
      })
    },
    getDataPermissions() {
      getDataPermissions({
        type: '1',
      }).then(res => {
        if (res.status === 200) {
          this.orgOptions = res.data
          this.cascaderOneList = this.orgOptions
          if (this.$route.query.orgId) {
            this.getOrg(this.$route.query.orgId)
          }
        }
      })
    },
    chooseOP() {
      this.cascaderShow = true
    },
    filterClick(item) {},
    onConfirmFil() {
      this.getOrgTable()
      this.showFilter = false
    },
    goDetail(info) {
      this.$router.push({
        path: '/detailOutDuty',
        query: {
          id: info.dailyId,
          formId: info.formId,
          processInstanceId: info.processInstanceId,
          type: info.checkType,
        },
      })
      sessionStorage.setItem('staticsInfo', JSON.stringify(this.$data))
    },
    refreshFilter() {
      this.filterStr = ''
      this.getOrgTable()
    },
    getOrg(id) {
      for (let i = 0; i < this.orgOptions.length; i++) {
        let eli = this.orgOptions[i]
        if (eli.orgId === id) {
          this.orgPerson = eli.orgName
          this.confirmInfo = {
            oneInfo: eli,
            secInfo: '',
            secList: eli.userList,
          }
          break
        }
      }
    },
    getSearchTimeList() {
      getSearchTimeList().then(res => {
        if (res.status === 200) {
          this.timeList = res.data
          const arr = []
          res.data.forEach(item => {
            const arr2 = []
            if (item.monthList.length) {
              item.monthList.forEach(li => {
                arr2.push({
                  text: li.month + '月',
                  value: li.month,
                  isChoose: li.isChoose,
                })
              })
            }
            arr.push({
              text: item.year + '年',
              value: item.year,
              isChoose: item.isChoose,
              monthList: [{ text: '全部', value: '' }, ...arr2],
            })
          })
          this.yearOptions = arr
          const arr1 = arr.filter(item => {
            return item.isChoose
          })
          this.yearData = arr1[0].value
          this.monthOptions = arr1[0].monthList
          this.monthData = this.monthOptions[0].value
          this.getOrgTable()
        }
      })
    },
    getTypeList() {
      getTypeList().then(res => {
        if (res.status === 200) {
          const arr = []
          res.data.forEach(item => {
            arr.push({
              text: item.typeName,
              value: item.typeId,
            })
          })
          this.holidayOptions = arr
          this.holidayData = arr[0].value
          this.filterList = res.data[0].children
          this.activeStatusInfo = arr[0]
          this.getOrgTable()
        }
      })
    },
    yearChange() {
      const arr = this.yearOptions.filter(item => {
        return item.value === this.yearData
      })
      this.monthOptions = arr[0].monthList
      this.monthData = this.monthOptions[0].value
      this.getOrgTable()
    },
    monthChange() {
      // console.log(this.monthData)
      this.getOrgTable()
    },
    backChange() {
      // console.log(this.backType)
      this.getOrgTable()
    },
    holidayChange() {
      console.log(this.holidayData)
      const arr = this.holidayOptions.filter(item => {
        return item.value === this.holidayData
      })
      this.activeStatusInfo = arr[0]
      this.getOrgTable()
    },
    peopleChooseConfirm(data) {
      this.confirmInfo = data
      let strOne = data.oneInfo.orgName ? data.oneInfo.orgName : '',
        strSec = data.secInfo.userName ? data.secInfo.userName : ''
      this.orgPerson = strSec ? strSec : strOne
      let orgId = ''
      if (strOne) {
        orgId = data.oneInfo.orgId
      }
      this.orgId = orgId
      this.getOrgTable()
      this.cascaderShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
.gather_duty {
  font-size: 12px;
  /deep/ .van-popup {
    position: absolute;
  }
  /deep/.van-dropdown-menu__bar {
    height: 36px;
    box-shadow: none;
  }
  .gather_duty_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    .duty_title_left {
      width: 40%;
    }
    .duty_title_center {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    .duty_title_right {
      width: 30%;
      font-size: 13px;
      color: #333;
      text-align: center;
      overflow: hidden;
      display: flex;
      align-items: center;
      span {
        width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .gather_main {
    .gather_main_title {
      font-weight: bold;
      font-size: 13px;
    }
    .gather_statics {
      padding: 10px 15px;
      .head {
        margin-bottom: 16px;
        position: relative;
        display: flex;
        align-items: center;
        /deep/.van-dropdown-menu__bar {
          height: 25px;
        }
        .one_count {
          margin-left: 10px;
          background-color: #fdeed7;
          border-radius: 2px;
          padding: 3px 10px;
        }
        .icon {
          position: absolute;
          right: 10px;
          top: 3px;
          color: #333;
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 18px;
          }
          .iconzhongzhi {
            margin-right: 23px;
            font-size: 16px;
          }
          .choose_i {
            color: #409eff;
          }
          .refresh {
            margin-right: 23px;
            font-size: 13px;
          }
        }
      }
    }
    .statics_box {
      color: #333;
      .statics_info_one {
        margin-top: 9px;
      }
      .one_indo_title {
        direction: flex;
        align-items: center;
        height: 20px;
      }
      .ones_duty {
        border-bottom: 1px solid #efefef;
      }
      .infos_one_gather {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        // height: 25px;
        background-color: #f7f7f7;
        margin-bottom: 10px;
        padding: 5px;
        p {
          line-height: 20px;
          padding-left: 5px;
        }
      }
      .boder_circle {
        height: 7px;
        width: 7px;
        border-radius: 50%;
        background-color: #942733;
        display: inline-block;
      }
      .gather_status {
        color: #ff0000;
      }
      .extra {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .desc {
          color: #7f7f7f;
          font-size: 12px;
        }
      }
    }
    // 周期切换
    .tab_con_tabs {
      display: flex;
      align-items: center;
      padding: 8px 8px;
      border-bottom: 1px solid #efefef;
      // flex-wrap: wrap;
      // overflow-x: auto;
      overflow-x: scroll;
      word-break: keep-all;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        border-radius: 1px;
      }
      .tab_li {
        font-size: 12px;
        color: #333333;
        border-radius: 2px;
        padding: 4px 8px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-right: 5px;
        &.active {
          background-color: #f4f6f8;
          font-weight: bold;
        }
        .li_name {
          font-size: 12px;
        }
      }
    }
  }
}
.cascader_pop {
  height: 60%;
  overflow: hidden;
}
.filter_pop {
  display: flex;
  flex-direction: column;
  height: 60%;
  overflow: hidden;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    // font-size: 14px;
    background-color: #f5f6fa;
    .title {
      font-size: 16px;
      color: #333;
    }
  }
  .filter_list {
    flex: 1;
    font-size: 14px;
    text-align: center;
    // margin-top: 16px;
    padding: 12px 0;
    overflow-y: auto;
    .li {
      padding: 12px 12px;
    }
    .li_choose {
      color: #e1af54;
    }
    /deep/.van-radio {
      justify-content: center;
      .van-radio__icon {
        height: auto;
        font-size: 18px;
      }
    }
  }
}
</style>
